<template>
  <x-layout>
    <template #common>
      <view
        class="w-100% flex flex-col justify-center items-center gap-40rpx bg-#fd7e25 h-400"
      >
        <view
          class="color-white font-700 text-50"
        >
          小六壬·活数起课法
        </view>
        <view
          class=" font-700 text-28  border-rd-16rpx color-#fff p-[10rpx_40rpx]"
        >
          想预测什么事，心念一动，立刻取数，取数可以是心中所想，也可以是看到的比如车牌号、门牌号、电话号码、时间等，要第一反应想到或看到的数。比如想问朋友在不在家，心念一动，恰巧看到手机屏幕上显示的时间是14：36分，就取1436进行测算；
        </view>
      </view>
      <view class="w-100% p-[10rpx_20rpx]">
        <u-input
          v-model="curNum"
          type="number"
          placeholder="请输入活数"
          class="bg-#fff border-0"
        />
      </view>
      <view class="flex justify-center">
        <view @click="goTest" class="bg-#fd7e25 border-rd-16rpx color-#fff p-[20rpx_40rpx] flex inline-flex">
          测算
        </view>
      </view>
    </template>
    <template #scroll>
      <view class="w-100%">
        <view class="p-20rpx" v-if="curData.title">
          <view class="flex flex-col gap-20rpx bg-#fff color-#585858 p-20rpx border-rd-16rpx text-28">
            <view class="flex">
              <view class="font-700">
                卦象：
              </view>
              <view class="flex-1">
                {{ curData.title }}
              </view>
            </view>
            <view class="flex">
              <view class="font-700">
                简译：
              </view>
              <view class="flex-1">
                {{ curData.autherSay }}
              </view>
            </view>
            <view class="flex">
              <view class="font-700">
                属相：
              </view>
              <view class="flex-1">
                {{ curData.number }}
              </view>
            </view>
            <view class="flex">
              <view class="font-700">
                详情：
              </view>
              <view class="flex-1">
                {{ curData.desc }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>
  </x-layout>
</template>

<script setup>
import { ref } from 'vue'
import { liveCountList } from './data'

const curNum = ref()

const curData = ref('')

const goTest = () => {
  const valueList = Array.from(String(curNum.value), Number)
  calcResult(valueList)
}

const calcResult = (valueList) => {
  const lenCount = valueList.length === 1 ? 0 : valueList.length - 1
  const sum = valueList.reduce((sumValue, cur) => (sumValue += cur))

  const result = (sum - lenCount) % 6 === 0 ? 5 : ((sum - lenCount) % 6) - 1
  curData.value = liveCountList[result]
}
</script>

<style lang="scss" scoped>

</style>
